// 1.认识函数式组件和 JSX
// React 使用函数式组件和 JSX 构建用户界面，Vue 目前也对函数式组件和 JSX 语法进行了支持。


//函数式组件，要求返回用户界面，而用户界面使用JSX进行构建
// export const LearnJsx1=()=>{
//     //Jsx语法，JSX和HTML很想，但JSX是JavaScript不是HTML
//     return (
//         <div>
//             我是组件LearnJsx
//             <HelloWorld />
//         </div>
//     )
// }

// export const HelloWorld=()=>{
//     return <div>Hello World</div>
// }

// 2.学习 JSX 语法规则和函数式组件的使用方式

//(1)在使用JSX语法创建元素时，元素的最外层必须要有一个根标记
// const jsx=(
//     <div>
//         <p>Hello</p>
//         <p>World</p>
//     </div>
// )

//为避免要满足规定而出现无意义标记，可以使用空标记作为根标记空标记不会被渲染成真实DOM节点
// const jsx=(
//     <>
//         <p>Hello</p>
//         <p>World</p>
//     </>
// )


//(2)在JSX中单标记是必须闭合的
// const jsx=<input type="text" />
// const jsx1=<img src="" />

//(3) 标记属性使用驼峰式命名法
// 注意: vue 中标记属性也可以不使用驼峰式命名法, 但是在 React 中是必须使用的
// 为了学习一致性, 无论 vue 还是 react 我们都使用驼峰式命名法
// const jsx = <input maxLength="10" readOnly autoFocus />;

//(4)使用className替换class 、使用htmlFor替换for，因为class和for是JavaScript中的关键字
//HTML写法
{/* <input class="todos" />
<label for="demo">This is a test input</label>  */}

//JSX写法
{/* <div>
<input className="todos" />
<label htmlFor="demo">This is a test input</label>
</div> */}

// (5)在JSX中使用{/**/}作为注释
// const jsx = (
// 	<>
//   	{/* 头部 */}
//     <div>header</div>
// 		{/* 底部 */}
//     <div>footer</div>
//   </>
// )


//(6)在 JSX 中插值语法为单花括号，无论为元素内容添加动态值还是为元素属性添加动态值都使用插值表达式
// export const LearnJsx1=()=>{
//     const someContent="一段内容";
//     const someClassName="active";
//     return <div className={someClassName}>{someContent}</div>
// }

//在jsx中插入对象
// export const LearnJsx1=()=>{
//     return (
//         <div style={{
//             height:"200px",
//             width:"200px",
//             background:"red"
//         }}>
//             box
//         </div>
//     )
// }


// (7)JSX 元素的事件名称使用驼峰式命名法，比如 onClick、onChange
// export const LearnJsx1=()=>{
//     return <button onClick={()=>alert(1)}>button</button>
// }


// (8)使用 JSX 遍历列表
// const fruites = [
//     { id: 1, name: "apple" },
//     { id: 2, name: "banana" },
//     { id: 3, name: "pear" },
//   ];

// export const LearnJsx1=()=>{
//     return (
//         <ul>
//             {fruites.map((item)=>(
//                 <li key={item.id}>
//                     {item.id}{item.name}
//                 </li>
//             ))}
//         </ul>
//     )
// }

// (9) 在函数式组件中声明响应式数据的方式
// //声明响应式状态
// const count=ref(0)

// export const LearnJsx1=()=>{
//     //使用响应式状态
//     //注意：目前我们写的所有的代码都是JavaScript代码，所以在使用通过ref创建的响应式数据时都需要加.value
//     return (
//         <button onClick={()=>{
//             count.value=count.value+1
//         }}>
//             {count.value}
//         </button>
//     )
// }


// (10) 在 JSX 中进行条件判断

